<template>
  <view class="content">
    <u-navbar title="" left-icon="" bg-color="transparent" placeholder></u-navbar>
    <view class="img">
      <image style="width: 188rpx;height: 188rpx;margin-bottom: 30rpx;" src="/static/cover.png"
             mode=""></image>
      <view class="">
        欢迎登录!
      </view>
    </view>
    <view class="mains">
      <view class="">
        请登录
      </view>
      <view  class="login-btn">
        <button @getphonenumber="getPhoneNumber" open-type="getPhoneNumber" class="wx-login">
          <image src="/static/phone.png" style="width: 88rpx;height: 88rpx;"></image>
          <text>手机号快捷登录</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>

import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {getphone} from "../../request/api";

export default {
  components: {UNavbar},

  data() {
    return {
      phone: '',
      code: '',
      getCodeisWaiting: false,
      getCodeText: '发送验证码',
    }
  },
  onShow() {
    if (uni.getStorageSync('token')){
      uni.switchTab({
        url:'/pages/index/index'
      })
    }
  },
  methods: {
    //登录成功
    loginSuccess(res) {
      uni.hideLoading();
      uni.showToast({
        title: '登录成功',
        icon: 'none'
      });
      uni.setStorageSync('token', res.data.token);
      setTimeout(() => {
        uni.switchTab({
          url:'/pages/index/index'
        })
      }, 1000)
    },
    //登录提交
    handlerSubmit() {
      if (!this.phone) return uni.showToast({
        title: '请输入手机号',
        icon: 'none'

      });
      if (!this.code) return uni.showToast({
        title: '请输入验证码',
        icon: 'none'

      });
      uni.showModal({
        title: '登录中'
      })
      mobileLogin({
        mobile: this.phone,
        code: this.code,
        mcode: this.code,
      }).then(res => {
        this.loginSuccess(res);
      })
    },
    //获取手机号
    getPhoneNumber(e) {
      uni.showLoading({
        title: '登录中'
      })
      const _this = this;
      uni.login({
        success({code}) {
          getphone({...e.detail, code}).then(res => {
            _this.loginSuccess(res);
          })
        }
      })

    },
    //获取验证码
    async getCodes() {
      if (this.getCodeisWaiting) return uni.showToast({
        title: '请勿频繁操作',
        icon: 'none'
      });
      let reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
      if (!reg.test(this.phone)) return uni.$u.toast('手机号格式不正确');
      this.getCodeisWaiting = true;
      uni.showLoading({
        title: '发送中'
      })
      sendCode({
        mobile: this.phone
      }).then(() => {
        uni.hideLoading();
        let count = 60;
        let timer = setInterval(() => {
          this.getCodeText = `重新获取(${count})`;
          count--;
          if (count <= 0) {
            clearInterval(timer);
            this.getCodeisWaiting = false;
            this.getCodeText = `获取验证码`;
          }
        }, 1000)
      }).catch(() => {
        this.getCodeisWaiting = false;
      })
    },
    getPhone(e) {
      console.log(12, e);
      let that = this
      uni.login({
        provider: 'weixin',
        success: async function (loginRes) {
          console.log(loginRes);
          let logCode = loginRes.code
          // return
          // let phoneData = {
          // 	code: logCode,
          // 	encryptedData: e.detail.encryptedData,
          // 	iv: e.detail.iv
          // }
          // let res = await getUserPhone(phoneData)
          // uni.setStorageSync('mobile', res.data.data)
          uni.showLoading({
            title: '加载中'
          });
          // if (res.data.status == 1) {
          if (true) {
            uni.getUserInfo({
              provider: 'weixin',
              success: async function (infoRes) {
                let nickname = infoRes.userInfo.nickName
                let head_pic = infoRes.userInfo.avatarUrl
                console.log(2, infoRes);
                // console.log('用户昵称为：' + infoRes.userInfo.nickName);
                uni.hideLoading()
                uni.setStorageSync('nickname', nickname)
                uni.setStorageSync('head_pic', head_pic)
                // that.wxLogins()

                uni.switchTab({
                  url: "/pages/my/my"
                })
              }
            });
          }
        }
      })
    },
    wxLogins(e) {
      uni.login({
        provider: 'weixin',
        success: async function (loginRes) {
          let logCode = loginRes.code
          let wxLoginData = {
            code: logCode,
            nickname: uni.getStorageSync('nickname'),
            head_pic: uni.getStorageSync('head_pic'),
            mobile: uni.getStorageSync('mobile')
          }
          let res = await weChatLogin(wxLoginData)
          if (res.data.status == 1) {
            uni.showToast({
              icon: 'success',
              title: "登录成功"
            })
            uni.hideLoading()
            uni.setStorageSync('user_id', res.data.data.user_id)
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/index/index"
              })
            }, 1000)
          }
        },
        fail(error) {
          console.log(error);

        }
      });

    }
  }
}
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  background: #f6f7f8;
  width: 100vw;
  height: 100vh;

  .df {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;

    u-input {
      flex-grow: 1;
    }
  }

  .img {
    text-align: center;
    font-weight: 500;
    font-size: 30rpx;
    color: #2D6E37;
    margin-top: 40rpx;
  }

  .mains {
    padding: 30rpx;
  }

  .login-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    width: 100%;
    height: 110rpx;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    background: #ffffff;
    margin: 20rpx 0;

    .get-code {
      font-size: 28rpx;
      flex-shrink: 0;
      margin-left: 100rpx;
      color: #2D6E37;
    }
  }

  .login-btn {
    width: 100%;
    height: 90rpx;
    border-radius: 45rpx 45rpx 45rpx 45rpx;
    background: #2D6E37;

    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80rpx 0;
    button{
      display: flex;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
      align-items: center;
      justify-content: center;
      width: 100%;
      background-color: transparent;
      height: 100%;
    }
  }

  .wx-box {
    margin: 0 auto;
    width: 300rpx;
    margin-top: 150rpx;

    .wx-login {
      font-size: 26rpx;
      color: #666666;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: none !important;
    }

    .wx-login::after {
      border: none;
    }
  }
}
</style>
